<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
	 用户名
	<input type="text" >
	<br />
	密码
   <input type="text" v-myfocus>
   
   <hr />
   <h1 v-mycolorred>神龙教主 洪福齐天</h1>
   <!-- <h1 v-mycolorred2="JS代码">钱某（绿色）</h1> -->
   <h1 v-mycolorred2="'green'">钱某（绿色）</h1>
   <h1 v-mycolorred2="'blue'">钱某（蓝色）</h1>
   <h1 v-mycolorred2="'yellow'">钱某（黄色）</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.directive('myfocus', { // 通过 v-myfocus来调用
	inserted: function(el) { // 当前标签对象
		console.log(el)
		el.focus()
	}
})

Vue.directive('mycolorred', { // 
	inserted: function(el) { // 当前标签对象
		console.log(el)
		el.style.color = 'red'
	}
})

Vue.directive('mycolorred2', { //
	inserted: function(el, params) { // 当前标签对象
		console.log(el)
		el.style.color = params.value
	}
})

let vm = new Vue({
	el: '#app',
	data: {

	}
})
</script>
</body>
</html>